<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'addon.mod_scorm.toc' | translate }}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <nav>
        <ion-list class="addon-mod_scorm-toc">
            <ion-item text-wrap *ngIf="attemptToContinue">
                <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
            </ion-item>
            <ion-item text-center *ngIf="isBrowse">
                <p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
            </ion-item>
            <ion-item text-center *ngIf="isReview">
                <p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
            </ion-item>

            <!-- List of SCOs. -->
            <ng-container *ngFor="let sco of toc">
                <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="'core-padding-' + sco.level + ' addon-mod_scorm-type-' + sco.scormtype" [class.core-nav-item-selected]="selected == sco.id" [class]="" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" [attr.detail-none]="!sco.prereq || !sco.launch ? true : null">
                    <core-icon [name]="sco.image.icon" [label]="sco.image.description" item-start></core-icon>
                    <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId"></core-format-text>
                    <span *ngIf="accessInfo && accessInfo.canviewscores && sco.score_raw">({{ 'addon.mod_scorm.score' | translate }}: {{sco.score_raw}})</span>
                </a>
            </ng-container>
        </ion-list>
    </nav>
</ion-content>
